<template>
	<view>
		<view class="margin-top-xs cu-list menu">
			<view class="cu-item arrow" @tap="changeImg">
				<view class="content">图像</view>
				<image :src="imgSrc" class="portrait"></image>
			</view>
			<view class="cu-item arrow" @tap="setNick">
				<view class="content">昵称</view>
				<text class="text-gray text-sm">{{ userNick }}</text>
			</view>
			<view class="cu-item arrow" @tap="setSex">
				<view class="content">性别</view>
				<text class="text-gray text-sm">{{ sexType }}</text>
			</view>
			<view class="cu-item arrow" @tap="setInviteCode">
				<view class="content">邀请码</view>
				<text class="text-gray text-sm">{{ inviteCode }}</text>
			</view>
		</view>
		<imageCutter @upload="onok" quality="1" ref="avatar"></imageCutter>
	</view>
</template>

<script>
import imageCutter from '../../components/image-cutter.vue';
var _self; //this容器
export default {
	components: {
		imageCutter
	},
	data() {
		return {
			imgSrc: '/static/missing-face.png', //图像地址
			url: '', //图像插件临时地址
			nick: '',
			sex: '',
			inviteCode: ''
		};
	},
	computed: {
		sexType() {
			return this.sex == 'M' ? '男' : this.sex == 'F' ? '女' : '';
		},
		userNick() {
			return this.nick ? this.nick : '木有昵称';
		}
	},
	onLoad() {
		_self = this;
		let userobj = _self.$util.getUserStorage();
		if (userobj) {
			_self.imgSrc = userobj.userPicture ? userobj.userPicture : '/static/missing-face.png';
			_self.nick = userobj.nick;
			_self.sex = userobj.sex;
			_self.inviteCode = userobj.inviteCode;
		}

		//用户名修改监听
		_self.$onFire.on('nickListener', function(value) {
			_self.changeNick(value);
		});
		//性别修改监听
		_self.$onFire.on('sexListener', function(value) {
			_self.changeSex(value);
		});
		//邀请码修改监听
		_self.$onFire.on('inviteCodeListener', function(value) {
			_self.changeInviteCode(value);
		});
	},
	methods: {
		changeImg() {
			this.$refs.avatar.fChooseImg(0, {
				selWidth: '400rpx',
				selHeight: '400rpx',
				expWidth: '300rpx',
				expHeight: '300rpx',
				inner: false,
				canRotate: false
			});
		},
		onok(ev) {
			_self.imgSrc = ev.path;
			_self.$http.httpUpLoad('user/userPhoto', _self.imgSrc).then(res => {
				if (res._tranStatus) {
					let userobj = _self.$util.getUserStorage();
					if (userobj) {
						userobj.userPicture = _self.imgSrc;
						_self.$util.setUserStorage(userobj);
					}
				}
			});
			this.url = '';
		},
		oncancle() {
			this.url = '';
		},

		/* 设置用户名 */
		setNick() {
			uni.navigateTo({
				url: 'settingNick?cnt=' + encodeURIComponent(_self.nick)
			});
		},
		/* 按监听返回值重新设置用户名 */
		changeNick(value) {
			_self.nick = decodeURIComponent(value);
		},

		/* 设置性别 */
		setSex() {
			uni.navigateTo({
				url: 'settingSex?cnt=' + _self.sex
			});
		},
		/* 按监听返回值重新设置性别 */
		changeSex(value) {
			_self.sex = value;
		},

		/* 设置邀请码 */
		setInviteCode() {
			uni.navigateTo({
				url: 'settingInviteCode?cnt=' + encodeURIComponent(_self.inviteCode)
			});
		},
		/* 按监听返回值重新设置邀请码 */
		changeInviteCode(value) {
			_self.inviteCode = decodeURIComponent(value);
		}
	},
	onUnload() {
		this.$onFire.off();
	}
};
</script>

<style lang="scss">
.portrait {
	width: 130rpx;
	height: 130rpx;
	border: 5rpx solid #fff;
	border-radius: 50%;
}
</style>
